<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css"  media="all">
    <script src="https://www.layuicdn.com/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="demoTable">
    搜索商户：
    <div class="layui-inline">
        <input class="layui-input" name="name" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="LAY_table_user" lay-filter="useruv"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: '/qureyall',
            contentType: 'application/json;charset=utf-8'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'name', title: '商户的名字', width:80, sort: true}
                ,{field:'gender', title: '商店的地址', width:80, sort: true,edit:true}
                ,{field:'age', title: '商店的年龄', width:180}

                ,{field:'specialty', title: '你才', width:100}
                ,{field:'birthday', title: '开店的时间', width:100}
                ,{field:'right', title: '操作', width:177,toolbar:"#barDemo"}
            ]]
            ,id: 'testReload'
            ,page: true
            ,limit: 4
            ,height: 600
        });

        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#demoReload');
                table.reload('testReload', {
                    page: {
                        curr:1
                    },
                    where: {
                        name: demoReload.val()
                    }
                },'data');
            }
        };



        //监听表格复选框选择
        table.on('checkbox(useruv)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(useruv)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('数据'+ data.id+data.name+data.gender+data.age+data.specialty+data.birthday);
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    console.log(data);
                    $.ajax({
                        url: "/delet",
                        contentType: 'application/json;charset=utf-8',
                        type: "get",
                        data:{"id":data.id},
                        dataType: "json",
                        success: function(data){
                            if(data.state==1){
                                obj.del();
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                            }else{
                                layer.msg("删除失败", {icon: 5});
                            }
                        }

                    });
                });
            } else if(obj.event === 'edit'){
                // layer.prompt({
                //     formType: 2
                //     ,title: '修改 ID 为 ['+ data.id +'] 的店铺的名字'
                //     ,value: data.name
                // }, function(value, index){
                //     EidtUv(data,value,index,obj);
                // });
                layer.open({
                    title:'修改',
                    type:1,
                    area:['400px','400px'],
                    content:$("#form1")
                });
            }
        });
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        function  EidtUv(data,value,index,obj) {
            $.ajax({
                url: "http://localhost:8080/incace",
                type: "get",
                contentType: 'application/json;charset=utf-8',
                data:{"id":data.id,"gender":data.gender,"name":value,"specialty":data.specialty,"age":data.age},
                dataType: "json",
                success: function(data){
                    if(data.state==1){
                        layer.close(index);
                        //同步更新表格和缓存对应的值
                        obj.update({
                            name: value
                        });
                        layer.msg("修改成功", {icon: 6});
                    }else{
                        layer.msg("修改失败", {icon: 5});
                    }
                }

            });
        }

    });
</script>
<form class="layui-form layui-form-pane1" id="form1" name="form1" style="display: none;" lay-filter="first1">

    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">id</label>
        <div class="layui-input-inline">
            <input type="text" name="id" id="id" lay-verify="required|title" required placeholder="请输入账号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
            <input type="text" name="account" id="account" lay-verify="required|title" required placeholder="请输入账号" readonly="readonly" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="password" name="password" id="password" lay-verify="required|pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="name" lay-verify="required|" required placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机</label>
        <div class="layui-input-inline">
            <input type="tel" name="phone" id="phone" lay-verify="required|number" placeholder="请输入使用者手机号码" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">权限</label>
        <div class="layui-input-inline">
            <select name="power"  id="power" lay-verify="required|" lay-filter="interest-search" lay-search>
                <option value=""></option>
                <option value="一般管理员">一般管理员</option>
                <option value="超级管理员" >超级管理员</option>

            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-inline">
            <select name="status" id="status" lay-verify="required|" lay-filter="interest-search" lay-search>
                <option value=""></option>
                <option value="启用">启用</option>
                <option value="停用" >停用</option>


            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">修改</button>
        </div>
    </div>
</form>

</body>
</html>